<template>
  <div>
    <header>
      <van-nav-bar title="上报异常" left-arrow @click-left="onClickLeft" />
    </header>
    <main>
      <div class="form">
        <van-cell
          @click="timeShow = true"
          title="异常时间"
          :is-link="cell.timeFlag"
          :value="cell.timeValue"
          center
        />
        <van-action-sheet v-model="timeShow">
          <van-datetime-picker
            v-model="currentDate"
            title="选择时间"
            :formatter="formatter"
            confirm-button-text="完成"
            @confirm="onConfirm"
          />
        </van-action-sheet>

        <van-cell
          center
          @click="toLocation"
          title="上报位置"
          :is-link="cell.locationFlag"
          :value="cell.locationValue"
        />
        <van-cell
          center
          title="异常类型"
          :is-link="cell.typeFlag"
          :value="cell.typeValue"
          style="margin-bottom: 0px"
          @click="typeShow = true"
        />
        <van-popup
          v-model="typeShow"
          round
          position="bottom"
          closeable
          style="height: 520px"
        >
          <p style="margin-left: 20px; margin-top: 20px">选择类型</p>
          <van-radio-group v-model="form.type" @change="typeSelect">
            <van-cell-group
              style="width: 100%; padding: 0 15px; margin-top: 20px"
            >
              <van-cell
                :title="item"
                clickable
                @click="radio = item"
                v-for="(item, index) in columns"
                :key="index"
              >
                <template #right-icon>
                  <van-radio :name="item" checked-color="#ee0a24" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
          <!--     <van-picker
            title="选择异常类型"
            show-toolbar
            :columns="columns"
            @confirm="confirmType"
            @cancel="typeShow = false"
          /> -->
        </van-popup>
        <p class="err">异常描述</p>
        <van-field
          v-model="form.message"
          rows="5"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="请输入异常描述"
          show-word-limit
        />
      </div>
      <div class="upload">
        <p style="margin-bottom: 16px">上传图片 (最多6张)</p>
        <van-uploader
          v-model="fileList"
          multiple
          :max-count="6"
          :after-read="onRead"
        />
      </div>
    </main>
    <footer>
      <van-button round @click="submitForm">提交</van-button>
    </footer>
  </div>
</template>
<script>
import { upLoadPic } from "@/api/user.js";
import { Toast } from "vant";
export default {
  name: "SendErr",
  data() {
    return {
      form: {
        time: "",
        location: "",
        type: "",
        message: "",
        pics: [],
      },
      fileList: [],
      currentDate: new Date(),
      cell: {
        timeFlag: true,
        locationFlag: true,
        typeFlag: true,
        timeValue: "请选择",
        locationValue: "请选择",
        typeValue: "请选择",
      },
      timeShow: false,
      typeShow: false,
      columns: [
        "异常类型一",
        "异常类型二",
        "异常类型三",
        "异常类型四",
        "异常类型三",
        "异常类型四",
        "异常类型三",
        "异常类型四",
        "异常类型三",
        "异常类型四",
      ],
    };
  },
  created() {
    if (this.$route.query) {
      this.form.location = this.$route.query.location;
      console.log(this.$route.query);
      this.cell.locationValue = this.$route.query.location;
    } else {
      this.form.location = "";
    }
  },
  methods: {
    async submitForm() {
      if (this.form.type === "") {
        return this.$toast("请选择异常类型");
      }
      if (this.form.message === "") {
        return this.$toast("请输入异常描述");
      }
      const res = 121;
      Toast.success("提交成功");
    },
    async onRead(file) {
      console.log(file);
      const formData = new FormData();
      formData.append("file", file.file);
      const res = await upLoadPic(formData);
      if (res.code === 200) {
        this.form.pics.push(res.data.data);
      }
    },
    typeSelect(val) {
      console.log(val);
      this.form.type = val;
      this.cell.typeValue = val;
      // this.cell.typeFlag = false;
      this.typeShow = false;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onConfirm(val) {
      console.log(val);
      this.form.time = val;
      this.cell.timeValue = new Date(val).toLocaleString();
      // this.cell.timeFlag = false;
      this.timeShow = false;
    },
    toLocation() {
      console.log(111);
      /*  this.$router.push({
        path: "/location",
      }); */
      this.$router.push("/myLocation");
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      if (type === "hour") {
        return val + "时";
      }
      if (type === "minute") {
        return val + "分";
      }
      return val;
    },
  },
};
</script>
<style lang='less'  scoped>
header {
  padding-top: 43px;
  background-color: #fff;
  width: 100vw;
  height: 93px;
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 999;
  .van-nav-bar {
    width: 100%;
    height: 100%;
    line-height: 50px;
    font-size: 25px;
    color: #000;
    /deep/.van-nav-bar__title {
      font-weight: 700;
    }
  }
}
footer {
  position: fixed;
  left: 0;
  padding-bottom: 33px;
  bottom: 0;
  width: 100vw;
  height: 83px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  .van-button {
    margin-top: 10px;
    width: 207px;
    height: 50px;
    background-color: #ef4f3f;
    color: #fff;
  }
}
main {
  padding: 108px 15px 118px 15px;
  width: 100vw;
  background-color: #f4f4f4;
  .form {
    width: 345px;
    height: 390px;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    .van-cell {
      height: 60px;
      padding-left: 0;
      padding-right: 0;
    }
    .err {
      margin-top: 15px;
      margin-bottom: 20px;
      font-size: 14px;
    }
    /deep/.van-field__control {
      padding-left: 14px;
    }
    .van-field {
      width: 315px;
      height: 130px;
      background: #f4f4f4;
      border-radius: 8px;
    }
  }
  .upload {
    margin-top: 15px;
    // margin-bottom: 23px;
    padding: 20px;
    // height: 171px;
    width: 100%;
    border-radius: 10px;
    background-color: #fff;
  }
}
</style>
